<ion-header class="ion-no-border ion-no-shadow">
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-back-button></ion-back-button>
		</ion-buttons>

		<ion-title *ngIf="!isSearch"
			>{{ 'DELEGATES_PAGE.DELEGATES' | translate }}</ion-title
		>

		<ion-searchbar
			#searchbar
			*ngIf="isSearch"
			[(ngModel)]="searchQuery"
			[spellcheck]="false"
			[animated]="true"
			showCancelButton="never"
			clearIcon="none"
			placeholder="{{ 'SEARCH' | translate }}"
		></ion-searchbar>

		<ion-buttons slot="end">
			<ion-button (click)="toggleSearchBar()">
				<ion-icon
					slot="icon-only"
					[name]="isSearch ? 'close' : 'search'"
				></ion-icon>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>

	<ion-toolbar>
		<ion-segment [(ngModel)]="rankStatus" (ionChange)="onSegmentChange()">
			<ion-segment-button value="active">
				{{ 'DELEGATES_PAGE.ACTIVE' | translate }}
			</ion-segment-button>
			<ion-segment-button value="standBy">
				{{ 'DELEGATES_PAGE.STANDBY' | translate }}
			</ion-segment-button>
		</ion-segment>
	</ion-toolbar>
</ion-header>

<ion-content tappable>
	<ion-slides
		#delegateSlider
		(ionSlideDidChange)="onSlideChanged()"
		*ngIf="delegates"
	>
		<ion-slide *ngFor="let delegates of allDelegates">
			<ion-list inset class="delegate-list">
				<ng-template ngFor let-delegate [ngForOf]="delegates">
					<ion-item
						class="delegate-item"
						detail
						(click)="openDetailModal(delegate)"
						tappable
						*ngIf="delegate.username.indexOf(searchQuery.toLowerCase()) > -1"
					>
						<ion-grid class="py-4 pr-1">
							<ion-row class="flex-no-wrap">
								<ion-col size="2" class="text-center">
									<ion-text color="medium" class="text-sm">
										{{ delegate?.rate }}
									</ion-text>
								</ion-col>
								<ion-col size="7" class="truncate">
									<span>
										{{ delegate?.username }}
									</span>
									<ion-badge
										*ngIf="isSameDelegate(delegate?.publicKey)"
										color="danger"
									>
										{{ 'DELEGATES_PAGE.VOTED' | translate |
										lowercase }}
									</ion-badge>
								</ion-col>
								<ion-col
									size="2"
									class="text-center whitespace-no-wrap"
								>
									<span class="text-sm font-semibold">
										{{ (delegate?.approval).toFixed(2) }}%
									</span>
								</ion-col>
							</ion-row>
						</ion-grid>
					</ion-item>
				</ng-template>
			</ion-list>
		</ion-slide>
	</ion-slides>
</ion-content>

<pin-code
	[wallet]="currentWallet"
	(success)="generateTransaction($event)"
	#pinCode
></pin-code>
<confirm-transaction
	[wallet]="currentWallet"
	#confirmTransaction
></confirm-transaction>
